<template>
	<div class="home-content">
		<RecommendChapter></RecommendChapter>
		<Separator>
			<span slot="line-text">最新文章</span>
		</Separator>
		<PreviewChapter_type1></PreviewChapter_type1>
		<Separator></Separator>
		<PreviewChapter_type2></PreviewChapter_type2>
	</div>
</template>

<script>
    import RecommendChapter from "./RecommendChapter";
    import Separator from "./Separator";
		import PreviewChapter_type1 from "./previewChapter/PreviewChapter_type1";
		import PreviewChapter_type2 from "./previewChapter/PreviewChapter_type2";
		export default {
			name: "HomeContent",
			components: {PreviewChapter_type2, PreviewChapter_type1, Separator, RecommendChapter}
		}
</script>

<style scoped>
	@media screen and (max-width: 992px) {
		.home-content {
			padding: .2rem .2rem .2rem;
		}
		.home-content>div {
			padding-bottom: .1rem;
		}
	}
	@media screen and (min-width: 993px) {
		.home-content {
			padding: .3rem .3rem 0;
		}
		.home-content>div {
			padding-bottom: .3rem;
		}
	}
	.home-content {
		background-color: #FFFFFF;
		overflow: auto;
	}
</style>
